<style scoped>
.register {
  width: 100%;
  height: 100%;
  background-image: url("../../assets/bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
}

.register .from-wrap {
  position: fixed;
  left: 50%;
  margin-left: -200px;
  top: 30%;
  margin-top: -150px;
  width: 400px;
  height: 550px;
  border-radius: 10px;
  background-color: #fff;
  opacity: 0.88;
  padding: 20px 30px;
}

.register h2 {
  text-align: center;
  margin-bottom: 20px;
}

.register FormItem {
  margin-bottom: 15px;
}

.register .form-footer {
  text-align: right;
}

.ivu-form-item-required .ivu-form-item-label:before {
  display: inline;
}
</style>
<template>
  <div class="register">
    <div class="from-wrap">
      <a style="color:#515A6E">
        <Icon @click.native="$router.go(-1)" style="float:left;" type="md-arrow-back" size="24"></Icon>
      </a>
      <h2>注册</h2>
      <Form ref="registerData" :model="registerData" :rules="ruleValidate" :label-width="80">
        <FormItem label="用户名" prop="userName">
          <Input type="text" v-model="registerData.userName" placeholder="输入用户名"></Input>
        </FormItem>

        <FormItem label="密码" prop="userPassword">
          <Input type="text" v-model="registerData.userPassword" placeholder="请输入密码"></Input>
        </FormItem>

        <FormItem label="性别" prop="gender">
          <RadioGroup v-model="registerData.userSex" style="float: left">
            <Radio label="male">男</Radio>
            <Radio label="female">女</Radio>
          </RadioGroup>
        </FormItem>

        <FormItem label="地址" prop="userAddress">
          <Input type="text" v-model="registerData.userAddress" placeholder="填写地址"></Input>
        </FormItem>

        <FormItem label="电话" prop="userTelephone">
          <Input type="text" v-model="registerData.userTelephone" placeholder="输入电话"></Input>
        </FormItem>

        <FormItem label="电子邮件" prop="userEmail">
          <Input type="text" v-model="registerData.userEmail" placeholder="输入邮箱地址"></Input>
        </FormItem>

        <FormItem label prop="vCode">
          <Input
            type="text"
            v-model="registerData.vCode"
            placeholder="验证码通过邮箱获取"
            style="width:150px;float:left"
          ></Input>
          <Button
            type="info"
            :disabled="countTimeData.cantclick"
            @click="getEmailCode('registerData')"
            style="width:100px;height: 32px;padding:0;vertical-align:top"
          >{{countTimeData.content}}</Button>
        </FormItem>

        <FormItem class="form-footer">
          <Button
            type="primary"
            @click="handleSubmit(registerData)"
            @keyup.enter="handleSubmit(registerData)"
          >注册</Button>
          <Button @click="handleReset('registerData')" style="margin-left: 8px">清空</Button>
        </FormItem>
      </Form>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      registerData: {
        userName: "",
        userSex: "",
        userEmail: "",
        userTelephone: "",
        userAddress: "",
        userPassword: "",
        vCode: "",
        vCodeTemp: ""
      },
      ruleValidate: {
        userName: [
          { required: true, message: "用户名不能为空", trigger: "blur" },
          {
            type: "string",
            min: 3,
            max: 6,
            message: "用户名长度3-6个字符",
            trigger: "blur"
          }
        ],
        gender: [{ required: true, message: "请选择性别", trigger: "blur" }],
        userAddress: [
          { required: true, message: "地址不能为空", trigger: "blur" }
        ],
        userTelephone: [
          { required: true, message: "请填写手机号", trigger: "blur" },
          { min: 11, max: 11, message: "手机号码应为11位", trigger: "blur" }
        ],
        userEmail: [
          { required: true, message: "邮箱不能为空", trigger: "blur" },
          { type: "email", message: "邮箱地址格式错误", trigger: "blur" }
        ],
        userPassword: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          {
            type: "string",
            min: 6,
            max: 20,
            message: "密码长度6-20个字符",
            trigger: "blur"
          }
        ],
        vCode: [
          { required: true, message: "未填写验证码", trigger: "blur" },
          { min: 6, max: 6, message: "验证码为6位", trigger: "blur" }
        ]
      },
      countTimeData: {
        content: "获取验证码", // 按钮里显示的内容
        totalTime: 10, //记录具体倒计时时间
        cantclick: false
      }
    };
  },
  methods: {
    getEmailCode(name) {
      this.$refs[name].validateField("userEmail", eError => {
        if (eError == "邮箱不能为空" || eError == "邮箱地址格式错误") {
          this.$Message.error("请正确填写邮箱");
        } else {
          this.countTime();
          this.$axios
            .post(this.$host + "/account/emailAuthCode", {
              userEmail: this.registerData.userEmail,
              name: this.registerData.userName,
              html: "welcome.html"
            })
            .then(res => {
              this.registerData.vCodeTemp = res.data.data.emailAuthCode;
            });
        }
      });
    },
    countTime() {
      this.countTimeData.cantclick = true;
      this.countTimeData.content = this.countTimeData.totalTime + "s后重新发送";
      let clock = window.setInterval(() => {
        this.countTimeData.totalTime--;
        this.countTimeData.content =
          this.countTimeData.totalTime + "s后重新获取";
        if (this.countTimeData.totalTime < 0) {
          window.clearInterval(clock);
          this.countTimeData.content = "重新获取验证码";
          this.countTimeData.totalTime = 10;
          this.countTimeData.cantclick = false; //这里重新开启
        }
      }, 1000);
    },
    handleSubmit(name) {
      if (name.vCodeTemp == name.vCode) {
        this.$axios
          .post(this.$host + "/account/register", {
            userName: name.userName,
            userSex: name.userSex,
            userAddress: name.userAddress,
            userEmail: name.userEmail,
            userTelephone: name.userTelephone,
            userPassword: name.userPassword
          })
          .then(res => {
            if (res.data.message == "注册成功") {
              this.$Message.success({
                content: "注册成功!",
                duration: 10,
                closable: true
              });
              this.$router.push({ path: "/" });
            } else {
              this.$Message.error({
                content: "注册失败！" + res.data.message,
                duration: 10,
                closable: true
              });
            }
          });
      } else {
        this.$Message.error({
          content: "验证码错误",
          duration: 10,
          closable: true
        });
      }
    },
    handleReset(name) {
      this.$refs[name].resetFields();
    }
  }
};
</script>